/*
Template Name: Rokono HTML Template
Description: A Business/Portfolio HTML Template
Author: Chris Creed
URL: http://www.chris-creed.com
*/	

@import "reset.css";

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 960px; margin: 0 auto;  }
body { font-family: arial, sans-serif; background-color: #fff; color: #555; line-height: 24px; font-size: 14px; background: url(../images/main-bg.jpg) repeat-x; }
h1 { font-size: 38px; margin: 0 0 30px 0; }
h2 { font-size: 28px; margin: 40px 0 20px 0; }
h3 { font-size: 20px; margin: 30px 0 10px 0; font-style: italic; }
h4 { font-size: 18px; margin: 30px 0 15px 0;}
h5 { font-size: 18px; margin: 30px 0 5px 0;}
p { margin: 0 0 10px 0; }
a { text-decoration: none; color: #2684cd; }
a:hover { color: #555; cursor: pointer; }
em { font-style: italic; }
.hide { display: none; }
.title { margin-top: 0; }
.article-line { clear: both; border-bottom: 1px #ddd dotted; margin: 40px 0 45px 0; }
.cache-images { display: none }
.more-details { display: block; margin: 5px 0 0 0; }

/* ------------ */
/* -- Header -- */
/* ------------ */
#header { padding: 30px 0 0 0; height: 70px; border-bottom: 1px #ddd dotted; }
#header h1 { float: left; font-size: 35px; margin: 32px 0 0 0; letter-spacing: -2px; font-weight: bold; }
#header h1 a { color: #555; }

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { float: right; margin: 25px -22px 0 0;  }
.menu {	padding: 7px 6px 0 0; }
.menu li { margin: 0 0px; padding: 0 0 8px;	float: left; position: relative; }
.menu a { display: block; padding:  8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 17px; }
.menu .current a, .menu li:hover > a { color: #2684cd; }
.menu ul li:hover a, .menu li:hover li a { color: #555; }
.menu ul a:hover { background: #2684cd !important; color: #fff !important; }
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; left: 20px; border: solid 1px #ddd; }
.menu li:hover > ul { display: block; }
.menu ul li { float: none; margin: 0; padding: 0; }
.menu ul a { font-size: 16px; }
.menu ul ul { left: 250px; top: -3px; }
.menu li.current_page_item a { color: #2684cd; }
.menu .sub-menu li.current_page_item a { color: #2684cd; }

/* ---------------------- */
/* -- Featured Section -- */
/* ---------------------- */
#featured-section { float: left; margin: 0 0 0 0; overflow: hidden; padding: 20px 0 50px 0; border-bottom: 1px #ddd dotted; }
#featured-section h2 { clear: both; color: #888; letter-spacing: -1px; font-size: 30px; padding: 30px 0 15px 0; margin: 0; text-align: center; }
#featured-section h2 span { color: #555; }
#circles { margin: 30px 0 0 0; }
#circles .circle { float: left; margin: 0 0 0 36px; width: 183px; height: 205px; text-align: center; color: #eee; padding: 0 15px; }
.circle h3 { margin-top: 45px; }
#featured-section .red-circle { background: url(../images/circle-red.png) no-repeat; }
#featured-section .pink-circle { background: url(../images/circle-pink.png) no-repeat; }
#featured-section .orange-circle { background: url(../images/circle-orange.png) no-repeat; }
#featured-section .yellow-circle { background: url(../images/circle-yellow.png) no-repeat; }
#featured-section .first { margin-left: 0; }

/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#frontpage-main { float: left; margin: 50px 0 30px 0; background-color: #fff; width: 100%; }
#frontpage-main h3 { margin-top: 0; font-size: 18px; font-style: italic; }
#frontpage-main #overview { float: left; border-right: 1px #ddd dotted; width: 400px; padding-right: 80px; }
#frontpage-main #latest-article { float: right; width: 380px;  }
#latest-article .meta, #frontpage-section .meta a  { color: #aaa; font-size: 18px; }
#latest-article .article-title { font-size: 18px; }
#latest-article .read-more { display: block; background: url(../images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0;  margin: 12px 0 0 -2px; }
#latest-article .read-more:hover { background: url(../images/red-button-bg.png) no-repeat; }
.blue-bullets { float: left; margin: 10px 0 0 0; }
.blue-bullets li { background: url(../images/blue-bullet.png) no-repeat; height: 21px; position: relative; padding: 0px 0 18px 35px; }

/* ------------- */
/* -- Content -- */
/* ------------- */
#main { float: left; margin: 40px 0 50px 0; width: 100%; }
#content { float: left; width: 480px; padding: 0 165px 0 0; }

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
#portfolio { margin: 60px 0 50px 0; }
#portfolio h2 { letter-spacing: -1px; margin: 0 0 40px 0; font-size: 20px; font-style: italic; color: #888; }
.portfolio-item { float: left; width: 280px; height: 200px; margin: 0 0 60px 60px; }
.portfolio-item:hover { opacity: 0.7; }
.first { margin-left: 0; }
.portfolio-item img { border: 1px #ddd solid; }

/* ------------- */
/* -- Project -- */
/* ------------- */
#project-content { float: left; width: 480px; }
#project-header { margin: 0 0 25px 0; }
#project-content h3 { margin: 0 0 10px 0; }
#project-content h3 span { color: #888; }
#project-image-large img { float: right; border: 1px #ddd solid; }
#project-content .read-more { display: block; background: url(../images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; }
#project-content .read-more:hover { background: url(../images/red-button-bg.png) no-repeat; }
#project-header h3 { margin-bottom: 2px; }

/* ----------- */
/* -- Posts -- */
/* ----------- */
.article-title { margin: 0 0 -4px 0; }
.article-title a { font-size: 24px; color: #555; font-style: normal; }
.article-title a:hover { font-size: 24px; color: #2684cd; }
.article-meta, .article-meta a { margin: 5px 0 20px 0; font-size: 18px; color: #888; font-style: normal; }
.more-link { display: block; background: url(../images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; }
.more-link:hover { background: url(../images/red-button-bg.png) no-repeat; color: #fff; }

/* ------------- */
/* -- Sidebar -- */
/* ------------- */
#sidebar { float: left; width: 315px; margin: 0; }
#sidebar h3 { font-size: 16px; }
#sidebar .sidebar-title { margin-top: 0; }
#sidebar .sidebar-button { clear: both; display: block; background: url(../images/orange-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 15px 0 0 -2px; }
#sidebar .sidebar-button:hover { background: url(../images/black-button-bg.png) no-repeat; }
#sidebar .portfolio-item { clear: both; margin: 10px 0 10px 0; width: 100px; }
#sidebar .portfolio-item img { width: 250px; }
#sidebar .portfolio-item img:hover { opacity: 0.9; }

/* ------------------ */
/* -- Contact Form -- */
/* ------------------ */
#contact-details { float: left; width: 300px; padding: 0 120px 0 0; }
#contact-details .title { margin-top: 0; }
#contact-details h4 { margin: 0 0 5px 0; }
#contact-details span { color: #888; }
#contact-form-container { float: left; width: 450px;  }
#contact-form input { background: url(../images/textinput-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 250px; margin: 0 0 15px 0; font-size: 12px; color: #555; font-family: arial, sans-serif; }
#contact-form textarea { background: url(../images/textarea-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 350px; margin: 0 0 15px 0; font-size: 12px; color: #555; line-height: 18px; height: 150px; font-family: arial, sans-serif; }
#contact-form .submit { display: block; background: url(../images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; border: none; cursor: pointer; font-size: 14px; margin: 0 0 0 0; }
#contact-form .submit:hover { background: url(../images/red-button-bg.png) no-repeat; color: #fff; }
#response { background-color: #eee; border: 1px #ddd solid; padding: 10px; color: #cc0000; margin-bottom: 17px; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { float: left; border-top: 1px #ddd dotted; margin: 20px 0 0 0; padding: 15px 0 20px 0; width: 100%; }
.copyright { float: left; }
.twitter { float: right; }

/* ------------ */
/* -- Login -- */
/* ------------ */

#login-form-container { float: left; width: 450px; margin: 25px auto }
#loginForm input { background: url(../images/textinput-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 250px;  font-size: 12px; color: #555; font-family: arial, sans-serif; }
#loginForm fieldset { background: url(../images/textinput-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 250px;  font-size: 12px; color: #555; font-family: arial, sans-serif; }
#loginForm .submit { display: block; background: url(../images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; border: none; cursor: pointer; font-size: 14px; margin: 0 0 0 0; }
#loginForm .submit:hover { background: url(../images/red-button-bg.png) no-repeat; color: #fff; }
    